<template>
  <div class="all">
    <div class="exception-box">
      <div class="cloud">

      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, onUnmounted} from "vue";

const rainText = ()=>{
  var text = ("404");
  var letter = text[Math.floor(Math.random()*text.length)];
  return letter;
}
const rain = ()=>{
  let cloud = document.getElementsByClassName(`cloud`)[0];
  const newDiv = document.createElement("div");
  newDiv.innerHTML = rainText();
  cloud.appendChild(newDiv);
  let left = Math.floor(Math.random()*320)
  let size = Math.random()*1.5;
  newDiv.style.left = left+"px";
  newDiv.style.position = "absolute";
  newDiv.style.height = '20px';
  newDiv.style.top = '100px'
  newDiv.style.lineHeight = '20px';
  newDiv.style.textTransform = "uppercase";
  newDiv.style.color = "#000000";
  newDiv.style.textShadow = "0 0 5px #ffffff,\n" +
      "  0 0 15px #ffffff,\n" +
      "  0 0 30px #ffffff";
  newDiv.style.transformOrigin = "bottom";
  newDiv.style.fontSize = 0.5+size+"em";
  newDiv.style.animation = "animated 2s linear forwards"
  newDiv.classList.add('exceptionText')
  setTimeout(()=>{cloud.removeChild(newDiv)},
      2000);
}
const interval = setInterval(()=>{
  rain()
},20);
onMounted(()=>{
  interval;
})
onUnmounted(()=>{
  clearInterval(interval);
})
</script>

<style scoped>
*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.all{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  background: #181c1f;
}
.exception-box{
  position: relative;
  height: 400px;
  width: 100%;
  display: flex;
  justify-content: center;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  -webkit-box-reflect: below 1px linear-gradient(transparent,transparent,
  transparent,transparent,#000500);
}
.cloud{
  position: relative;
  width: 320px;
  height: 100px;
  background: white;
  border-radius: 50px;
  filter: drop-shadow(0 0 35px #ffffff);
}
.cloud::before{
  content: "";
  position: absolute;
  left: 40px;
  top: -50px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: white;
  box-shadow: 90px 0 0 30px #ffffff;
}
</style>
<style>
@keyframes animated {
  0%{
    transform: translateY(0) scale(1);
  }
  70%{
    transform: translateY(275px) scale(1);
  }
  100%{
    transform: translateY(275px) scale(0);
  }
}
</style>